import React, { useEffect, useState } from 'react'
import { List } from 'antd-mobile';
import { getCity } from "../../api/city/getcity"
import './index.css'

const Item = List.Item;

export default function City(props) {
    let res
    const [result, setresult] = useState([])

    useEffect(async () => {
        res = await getCity()
        setresult(res.data.data)
        // const arr = result
    }, [])
    console.log(result);

    function handle(e) {
        e.preventDefault()
        // const msg = e.target.innerText
        // xxx.srollView()
        document.getElementById(e.target.innerText === '*' ? 'all' : e.target.innerText).scrollIntoView()

    }
    function handleCity(code) {
        return function (e) {
            localStorage.setItem('areaCode', code)
            props.history.goBack()
        }
    }

    return (
        <div>
            <div className="tips">
                {
                    Object.keys(result).map((item, index) => {
                        return <a href="" key={item} onClick={handle}>{item}</a>
                    })
                }
            </div>
            <div className="list">
                {Object.keys(result).map((item, index) => {
                    return <List renderHeader={() => item} className="my-list" key={index} id={item === '*' ? 'all' : item}>
                        {result[item].map((item, index) => {
                            return <Item extra={item[Object.keys(item)[0]]} key={index} onClick={handleCity(item[Object.keys(item)[0]])}>{Object.keys(item)[0]}</Item>
                        })}
                    </List>
                })}
            </div>

        </div>
    )
}
